<template>
  <div class="goodslist">
    <header class="header">
      <span class="iconfont icon-zuojiantou2" @click="back"></span>
      <h1>{{ title }}</h1>
    </header>
    <div class="box1">
      <div class="classify1">
        <div class="pic" v-for="(item,index) in classifylist1" :key="index" :class="{'now1':index == current1}" @click="change1(index)">
           {{item.name}}
          <h3 v-if="index==2">
            <span class="shang"></span>
            <span class="xia"></span>
          </h3>
        </div>
        <!-- <div class="now1">综合</div>
        <div>销量</div>
        <div class="pic">
          <p>价格</p>
          <h3>
            <span class="shang"></span>
            <span class="xia"></span>
          </h3>
        </div>
        <div>新品</div> -->
      </div>
      <div class="classify2">
        <span v-for="(item, index) in classifylist2" :class="{'now2':index == current2}" @click ="change2(index)" :key = "index">{{item.name}}</span>
      </div>
      <ul class="classify3">
        <!-- <router-link to = "/goodsdetail" tag="li" v-for="(item, index) of typelist"  @click.native ="detail(item)" :key="index">
          <img :src="item.pitcures[0].url" alt="">
          <h3>{{ item.pname }}</h3>
          <h4>￥{{ item.price }}.00</h4>
          <h5>￥{{ item.price }}.00</h5>
          <div class="sales">
            <span>已售{{ item.price }}</span>
            <i>包邮</i>
          </div>
        </router-link> -->
        <li @click="goDetail ()">
          <img src="https://i1.douguo.com/upload/tuan/5/0/0/448_50aececb8cc78de07c657bbe26dc72a0.jpg" alt="">
          <h3>安特鲁七哥 葡式蛋挞半成品套装（挞皮*51个+挞液*3盒）</h3>
          <h4>￥65.80</h4>
          <h5>￥85.00</h5>
          <div class="sales">
            <span>已售122</span>
            <i>包邮</i>
          </div>
        </li>
         <li>
          <img src="https://i1.douguo.com/upload/tuan/5/0/0/448_50aececb8cc78de07c657bbe26dc72a0.jpg" alt="">
          <h3>安特鲁七哥 葡式蛋挞半成品套装（挞皮*51个+挞液*3盒）</h3>
          <h4>￥65.80</h4>
          <h5>￥85.00</h5>
          <div class="sales">
            <span>已售122</span>
            <i>包邮</i>
          </div>
        </li>
        <li>
          <img src="https://i1.douguo.com/upload/tuan/5/0/0/448_50aececb8cc78de07c657bbe26dc72a0.jpg" alt="">
          <h3>安特鲁七哥 葡式蛋挞半成品套装（挞皮*51个+挞液*3盒）</h3>
          <h4>￥65.80</h4>
          <h5>￥85.00</h5>
          <div class="sales">
            <span>已售122</span>
            <i>包邮</i>
          </div>
        </li>
        <li>
          <img src="https://i1.douguo.com/upload/tuan/5/0/0/448_50aececb8cc78de07c657bbe26dc72a0.jpg" alt="">
          <h3>安特鲁七哥 葡式蛋挞半成品套装（挞皮*51个+挞液*3盒）</h3>
          <h4>￥65.80</h4>
          <h5>￥85.00</h5>
          <div class="sales">
            <span>已售122</span>
            <i>包邮</i>
          </div>
        </li>
        <li>
          <img src="https://i1.douguo.com/upload/tuan/5/0/0/448_50aececb8cc78de07c657bbe26dc72a0.jpg" alt="">
          <h3>安特鲁七哥 葡式蛋挞半成品套装（挞皮*51个+挞液*3盒）</h3>
          <h4>￥65.80</h4>
          <h5>￥85.00</h5>
          <div class="sales">
            <span>已售122</span>
            <i>包邮</i>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      title: '',
      type: '',
      typelist: [],
      current1: 0,
      current2: 0,
      classifylist1: [{
        name: '综合'
      }, {
        name: '销量'
      }, {
        name: '价格'
      }, {
        name: '新品'
      }],
      classifylist2: [{
        name: '全部'
      }, {
        name: '食盐'
      }, {
        name: '食用油'
      }, {
        name: '辣酱'
      }, {
        name: '酱/醋/糖'
      }, {
        name: '香辛料'
      }]
    }
  },
  created () {
    const title = sessionStorage.getItem('title')
    this.title = title
    const type = sessionStorage.getItem('type')
    this.type = type
    // axios.all([this.gettypeList()]).then(axios.spread((listData) => {
    //     console.log(listData.data.data)
    //     this.typelist = listData.data.data
    // }))
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    change1(index){
      this.current1=index;
    },
    change2 (index) {
      this.current2 = index
    },
    goDetail () {
      this.$router.push(`/goodsdetail`)
    },
    // gettypeList () {
    //   return axios.get(`http://10.8.162.81:8082/list?id=${this.type}`)
    // },
    detail (item) {
      console.log(item.id)
      sessionStorage.setItem('id', item.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.goodslist{
  display: flex;
  flex-direction: column;
  flex: 1;
  height: auto;
  width: 100%;
  .header{
    height:0.44rem;
    width:100%;
    border-bottom:1px solid #8E8D8D;
    .icon-zuojiantou2{
      font-size:0.2rem;
      float:left;
      line-height:0.44rem;
      color:#1E1E1E;
      margin:0 0.25rem 0 0.15rem;
    }
    h1{
      height:100%;
      width:100%;
      line-height:0.44rem;
      color:#1E1E1E;
      font-size:0.175rem;
      letter-spacing:0.03rem;
      }
    }
  .box1{
    width:100%;
    flex: 1;
    height: auto;
    overflow: auto;
    display:flex;
    flex-direction:column;
    background:#eee;
    .classify1{
      background:#fff;
      height:0.4rem;
      width:100%;
      box-sizing:border-box;
      padding:0 0.15rem;
      display:flex;
      justify-content:space-around;
      align-items:center;
      div{
        font-size:0.14rem;
        color:#888;
      }
      .now1{
        font-weight:bold;
        color:#000;
      }
      .pic{
        display:flex;
        align-items:center;
        h3{
          padding-left:0.03rem;
          height:0.24rem;
          display:flex;
          flex-direction:column;
          justify-content:space-between;
          .shang{
            display:block;
            width:0;
            height:0;
            border-width:5px;
            border-style:solid;
            border-color:transparent transparent #888 transparent;
          }
          .xia{
            display:block;
            width:0;
            height:0;
            border-width:5px;
            border-style:solid;
            border-color:#888 transparent transparent transparent;
          }
        }
      }
    }
    .classify2{
      width:100%;
      height:0.4rem;
      display:flex;
      align-items:center;
      span{
        color:#888;
        display:block;
        height:0.22rem;
        line-height:0.22rem;
        font-size:0.12rem;
        padding:0 0.1rem;
        background:#fff;
        margin-left:0.1rem;
        border-radius:0.05rem
      }
      .now2{
        font-weight:bold;
        color:#000;
      }
    }
    .classify3{
      width:100%;
      min-height: 5rem;
      flex: 1;
      height: auto;
      overflow: auto;
      display:flex;
      justify-content:space-between;
      flex-wrap:wrap;
      box-sizing:border-box;
      padding: 0 0.1rem;
      li{
        width:48%;
        height:2.45rem;
        margin-bottom:0.15rem;
        background:#fff;
        img{
          width:100%;
          height:1.6rem;
        }
        h3{
          font-size: 0.08rem;
          color: #000;
          width:100%;
          height: 0.35rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          padding-left:0.05rem;
        }
        h4{
          width:100%;
          height: 0.18rem;
          line-height:0.18rem;
          font-size:0.13rem;
          color:#eb2624;
          padding-left:0.05rem;
        }
        h5{
          width:100%;
          height: 0.15rem;
          line-height:0.15rem;
          font-size:0.1rem;
          color:#888;
          text-decoration:line-through;
          padding-left:0.05rem;
        }
        .sales{
          height:0.2rem;
          line-height:0.2rem;
          color: #000;
          width:100%;
          font-size: 0.08rem;
          color:#888;
          span{
            float:left;
            padding-left:0.05rem;
          }
          i{
            float:right;
            padding-right:0.05rem;
          }
        }
      }
    }
  }
}
</style>
